<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
			.kuang{
				width: 800px;
				height: 400px;
				overflow: hidden;
				/*background: blue;*/
			}
			ul{
				width: 110%;
			}
			.kuang li{
				width: 100px;
				height: 400px;
				list-style: none;
				float: left;
			}
			.kuang li:last-child{
				width: 500px;
			}
			.kuang div{
				padding-top: 50px;
				width: 50px;
				height: 400px;
				background: black;
				opacity: .6;
				float: left;
				color: white;
				writing-mode: tb-rl;
			}
			.t1{
				background: url(img/1.jpg) left top/cover;
				width: 100px;
			}
			.t2{
				background: url(img/2.jpg) left top/cover;
				width: 100px;
			}
			.t3{
				background: url(img/3.jpg) left top/cover;
				width: 100px;
			}
			.t4{
				background: url(img/4.jpg) left top/cover;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="kuang">
			<ul>
				<li class="t1">
					<div>作者：默默的星星</div>
					<div>我的个人拉萨之旅——故事之城</div>
				</li>
				<li class="t2">
					<div>作者：美丽的天空</div>
					<div>拥抱绝美的戈壁倾听响沙的乐奏</div>
				</li>
				<li class="t3">
					<div>作者：蓝染想右介</div>
					<div>这美丽的香格里拉</div>
				</li>
				<li class="t4">
					<div>作者：美丽的天空</div>
					<div>征服个人项目——南极</div>
				</li>
			</ul>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("li").on("mouseover",function(){
				$(this).stop().animate({width:500},500).siblings().stop().animate({width:100},500);
			})
		</script>
	</body>

</html>